<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <!--:rules prop 如果不要校验那么这个属性可以不填-->
      <el-form
        label-width="160px"
        size="mini"
      >
        <el-row>
          <!--发起人-->
          <el-col :span="8">
            <el-form-item label="发起人:" style="margin-bottom: 10px;">
              <el-select
                v-model="table.bean_table.applyUser"
                class="venus-input-middle"
                filterable
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="(item) in dict.applyUser"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--流程名-->
          <el-col :span="8">
            <el-form-item label="流程名:" style="margin-bottom: 10px;">
              <el-select
                v-model="table.bean_table.processName"
                class="venus-input-middle"
                filterable
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="(item) in dict.processName"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--审核类型-->
          <el-col :span="8">
            <el-form-item label="审核类型:" style="margin-bottom: 10px;">
              <el-select
                v-model="table.bean_table.approvalType"
                class="venus-input-middle"
                filterable
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="(item) in dict.approvalType"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--发起时间-->
          <el-col :span="16">
            <el-form-item label="发起时间:" style="margin-bottom: 10px;">
              <el-date-picker
                v-model="table.bean_table.createStartDate"
                type="date"
                class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd"
                placeholder="请输入起始日期"
              />
              -
              <el-date-picker
                v-model="table.bean_table.createEndDate"
                type="date"
                class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd"
                placeholder="请输入截止日期"
              />
            </el-form-item>
          </el-col>
          <!--任务完成时间-->
          <el-col :span="16">
            <el-form-item label="任务完成时间:" style="margin-bottom: 10px;">
              <el-date-picker
                v-model="table.bean_table.finishStartDate"
                type="date"
                class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd"
                placeholder="请输入起始日期"
              />
              -
              <el-date-picker
                v-model="table.bean_table.finishEndDate"
                type="date"
                class="venus-input-middle venus-input-date"
                value-format="yyyyMMdd"
                placeholder="请输入截止日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;margin-bottom: 10px;">
          <el-button type="success" @click="search" size="mini">查询</el-button>
          <el-button type="info" plain @click="resetForm" size="mini">重置</el-button>
        </div>
      </el-form>
    </div>
    <!-- 查询列表返显 -->
    <div class="page-list">
      <table-pagination
        :table-data="table.bean_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        :operation-config="table.operationConfig"
        highlight-current-row
        :total="table.bean_table.total"
        :page-size="table.bean_table.limit"
        :now-page="table.bean_table.nowPage"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
  /* 自定义数据加载 */
  import request from '../../../utils/request.js'
  import * as kk from '../../../utils/k-utils.js'

  export default {
    name: 'HisCompleteTasks',
    data() { // 数据定义
      return {
        /* 字典 */
        dict: {
          applyUser: [], // 发起人
          processName: [], // 流程名
          approvalType: [] // 审核类型
        },
        /* 表格 */
        table: {
          // 表头配置
          tableHeaderConfig: [
            // { prop: 'order', label: '序号' },
            { prop: 'processDisplayName', label: '流程名' },
            { prop: 'taskDisplayName', label: '任务名' },
            { prop: 'applyUser', label: '发起人' },
            { prop: 'processInstanceCreateTime', label: '流程发起时间' },
            { prop: 'taskFinishTime', label: '任务完成时间' }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 100,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '详情', func: this.myDetail }
            ]
          },
          bean_table: {
            total: 0, // 总条数
            nowPage: 1, // 当前第几页
            limit: 5, // 分页配置
            tableData: [], // 表格数据
            // exeid: 'queryTrustInfo', // exeid
            // 查询条件
            applyUser: '', // 发起人
            processName: '', // 流程名
            approvalType: '', // 审核类型
            createStartDate: '',
            createEndDate: '',
            finishStartDate: '',
            finishEndDate: ''
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function() {
        /* 加载字典 */
        // 发起人
        this.load_dict_url(this, '/workflow/web3api/user/select2.json', 'applyUser')
        // 流程名
        this.load_dict_url(this, '/workflow/process/select2/allProcessNames.json', 'processName')
        // 审核类型
        this.dict.approvalType = [
          { id: '0', text: '普通' },
          { id: '1', text: '转审批' }
        ]
        /* 加载表格数据 */
        this.table.bean_table.nowPage = 1 // 初始第一页
        this.load_table_url(this, '/workflow/task/his/completeTasks.json', 'bean_table', 'workflow')
      },
      /* 通过url加载字典 */
      load_dict_url(this_object, url, dict) {
        request({
          loading: true,
          url: url,
          method: 'post'
        }).then(rep => {
          // rep接收到的是字符串
          if (typeof rep === 'string') {
            rep = JSON.parse(rep)
          }
          for (var key in rep) {
            this_object['dict'][dict].push(rep[key])
          }
        })
      },
      /* 通过url加载表格 */
      load_table_url(this_object, url, params_name) {
        this_object['table'][params_name].offset = (this_object['table'][params_name].nowPage - 1) * this_object['table'][params_name].limit// 后台分页参数
        this_object['table'][params_name].tableData = []// 清空原来的旧数据
        this_object['table'][params_name].order = 'asc'
        return request({
          loading: true,
          url: url,
          method: 'post',
          params: this_object['table'][params_name]// 请求参数
        }).then(rep => {
          // rep接收到的是字符串
          if (typeof rep === 'string') {
            rep = JSON.parse(rep)
          }
          // 格式化显示时间
          var a = ''
          var b = ''
          for (var i = 0; i < rep.rows.length; i++) {
            a = kk.dateFormat(rep.rows[i].processInstanceCreateDate) + ' ' + kk.timeFormat(rep.rows[i].processInstanceCreateTime)
            b = kk.dateFormat(rep.rows[i].taskFinishDate) + ' ' + kk.timeFormat(rep.rows[i].taskFinishTime)
            rep.rows[i].processInstanceCreateTime = a
            rep.rows[i].taskFinishTime = b
          }
          this_object['table'][params_name].total = rep.total// 获取总条数
          this_object['table'][params_name].tableData = rep.rows// 获取返回数据
        })
      },
      // 事件触发
      search() { // 查询函数
        this.table.bean_table.nowPage = 1 // 初始第一页
        this.load_table_url(this, '/workflow/task/his/completeTasks.json', 'bean_table', 'workflow')
      },
      // 重置
      resetForm() {
        this.table.bean_table.applyUser = ''// 发起人
        this.table.bean_table.processName = ''// 流程名
        this.table.bean_table.approvalType = ''// 审核类型
        this.table.bean_table.createStartDate = ''
        this.table.bean_table.createEndDate = ''
        this.table.bean_table.finishStartDate = ''
        this.table.bean_table.finishEndDate = ''
      },
      // 下一页触发的事件
      currentChange(index) {
        this.table.bean_table.nowPage = index // 初始第一页
        this.load_table_url(this, '/workflow/task/his/completeTasks.json', 'bean_table', 'workflow')
      },
      // ======================表格======================
      // 详情
      myDetail(item, index) {
        var params = {
          processId: item.processId,
          taskName: item.taskName,
          processInstanceId: item.processInstanceId,
          hisTaskId: item.hisTaskId,
          approvalId: item.approvalId,
          detail: true,
          taskDetail: true,
          processDisplayName: '',
          refPage: 'hisCompleteTasks'
        }
        this.$router.push({
          path: '/hisTaskDetail',
          query: params
        })
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
